<div class="ui-g" style="height:100%">
    <!--业务过程树-->
    <div class="ui-g-2 border-spe-left ui-widget-content">
        <!--业务过程级树-->
        <p-tree [value]="procs" selectionMode="single" [filter]="true" filterMode="strict" (onNodeSelect)="procNodeSelect($event)" [(selection)]="selectedProc"
            emptyMessage="无数据" [loading]="loadingProc" [style]="{'padding':'0', 'height': '100%','width':'100%','border-style':'none'}">
        </p-tree>
    </div>

    <!--环节参与者树-->
    <div class="ui-g-2 border-spe-left border-spe-right" style="height: 100%">
        <!--环节、参与者层级树-->
        <p-tree [value]="actParts" selectionMode="single" [filter]="true" filterMode="strict" (onNodeSelect)="actPartNodeSelect($event)" [(selection)]="selectedActPart"
            emptyMessage="无数据" [loading]="loadingActParts" [style]="{'padding':'0', 'height': '98%','width':'100%','border-style':'none'}">
        </p-tree>
    </div>

    <!-- 环节文书 -->
    <div class="ui-g-8 ui-widget-content">
        <p-tabView>
            <p-tabPanel header="输入表单" lefticon="fa fa-calendar">
                <div class="button-item">
                    <button pButton type="text" class="ui-button-info" icon="fa fa-plus" label="保存" (click)="saveAuthority()"></button>
                </div>
                <div class="ui-g-6">
                    <p-table #dtForm [value]="forms" [scrollable]="true" [scrollHeight]="formScorllHeight"
                        selectionMode="single" (onRowSelect)="onFormRowSelect($event)" [(selection)]="selectedForm" 
                        [loading]="loading">
                        <ng-template pTemplate="header">
                            <tr>
                                <th width="70%">表单名称</th>
                                <th width="30%" style="text-align:center">可见</th>
                            </tr>
                            <tr>
                                <th width="70%">
                                    <input pInputText type="text" style="width:100%" (input)="dtForm.filter($event.target.value, 'name', 'contains')">
                                </th>
                                <th width="30%" style="text-align:center">
                                    <p-checkbox binary="true"  [(ngModel)]="allFormVisiable" (click)="changeAllFormVisiable($event)"></p-checkbox>
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData>
                            <tr [pSelectableRow]="rowData">
                                <td width="70%">{{rowData.name}}</td>
                                <td pEditableColumn width="30%" style="text-align:center">
                                    <p-cellEditor>
                                        <ng-template pTemplate="input">
                                            <p-checkbox [(ngModel)]="rowData.read"
                                                binary="true"></p-checkbox>
                                        </ng-template>
                                        <ng-template pTemplate="output">
                                            <p-checkbox [(ngModel)]="rowData.read" (onChange)="formAuthorityChange(rowData)"
                                                binary="true"></p-checkbox>
                                        </ng-template>
                                    </p-cellEditor>
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>

                <div class="ui-g-6">
                    <p-table #dtField [value]="fields" [scrollHeight]="formScorllHeight">
                        <ng-template pTemplate="header">
                            <tr>
                                <th width="70%">组件名称</th>
                                <th width="15%" style="text-align:center">查看</th>
                                <th width="15%" style="text-align:center">编辑</th>
                            </tr>
                            <tr>
                                <th width="70%">
                                    <input pInputText type="text" style="width:100%" (input)="dtField.filter($event.target.value, 'name', 'contains')">
                                </th>
                                <th width="15%" style="text-align:center">
                                    <p-checkbox binary="true" [(ngModel)]="allFieldRead" (click)="changeAllFieldAuthority('read')"></p-checkbox>
                                </th>
                                <th width="15%" style="text-align:center">
                                    <p-checkbox binary="true" [(ngModel)]="allFieldWrite" (click)="changeAllFieldAuthority('write')"></p-checkbox>
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData>
                            <tr [pSelectableRow]="rowData">
                                <td width="70%">{{rowData.name}}</td>
                                <td pEditableColumn width="15%" style="text-align:center">
                                    <p-cellEditor>
                                        <ng-template pTemplate="input">
                                            <p-checkbox [(ngModel)]="rowData.read" binary="true"></p-checkbox>
                                        </ng-template>
                                        <ng-template pTemplate="output">
                                            <p-checkbox [(ngModel)]="rowData.read" (onChange)="fieldAuthorityChange(rowData)" binary="true"></p-checkbox>
                                        </ng-template>
                                    </p-cellEditor>
                                </td>
                                <td pEditableColumn width="15%" style="text-align:center">
                                    <p-cellEditor>
                                        <ng-template pTemplate="input">
                                            <p-checkbox [(ngModel)]="rowData.write" binary="true"></p-checkbox>
                                        </ng-template>
                                        <ng-template pTemplate="output">
                                            <p-checkbox [(ngModel)]="rowData.write" (onChange)="fieldAuthorityChange(rowData)" binary="true"></p-checkbox>
                                        </ng-template>
                                    </p-cellEditor>
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </p-tabPanel>
            <!--
            <p-tabPanel header="输出表单" lefticon="fa fa-calendar">
                <div class="button-item">
                    <button pButton type="text" class="ui-button-info" icon="fa fa-plus" label="保存" (click)="saveForm()"></button>
                </div>
                <div class="ui-g-7">
                    <p-table #dtPrintForm [value]="forms" [scrollable]="true" [scrollHeight]="formScorllHeight" selectionMode="single">
                        <ng-template pTemplate="header">
                            <tr>
                                <th width="70%">表单名称</th>
                                <th width="15%" style="text-align:center">查看</th>
                                <th width="15%" style="text-align:center">编辑</th>
                            </tr>
                            <tr>
                                <th width="70%">
                                    <input pInputText type="text" style="width:100%" (input)="dtPrintForm.filter($event.target.value, 'formName', 'contains')">
                                </th>
                                <th width="15%" style="text-align:center">
                                    <p-checkbox binary="true"></p-checkbox>
                                </th>
                                <th width="15%" style="text-align:center">
                                    <p-checkbox binary="true"></p-checkbox>
                                </th>
                            </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-rowData>
                            <tr>
                                <td width="70%">{{rowData.formName}}</td>
                                <td pEditableColumn width="15%" style="text-align:center">
                                    <p-cellEditor>
                                        <ng-template pTemplate="input">
                                            <p-checkbox [(ngModel)]="rowData.read" binary="true"></p-checkbox>
                                        </ng-template>
                                        <ng-template pTemplate="output">
                                            <p-checkbox [(ngModel)]="rowData.read" binary="true"></p-checkbox>
                                        </ng-template>
                                    </p-cellEditor>
                                </td>
                                <td pEditableColumn width="15%" style="text-align:center">
                                    <p-cellEditor>
                                        <ng-template pTemplate="input">
                                            <p-checkbox [(ngModel)]="rowData.edit" binary="true"></p-checkbox>
                                        </ng-template>
                                        <ng-template pTemplate="output">
                                            <p-checkbox [(ngModel)]="rowData.edit" binary="true"></p-checkbox>
                                        </ng-template>
                                    </p-cellEditor>
                                </td>
                            </tr>
                        </ng-template>
                    </p-table>
                </div>
            </p-tabPanel>-->
        </p-tabView>
    </div>
</div>